{% extends 'cms/cms_base.html' %}

{% block title %}
    轮播图管理
{% endblock %}

{% block head %}
    <script src="{{ static('cms/js/banners.js') }}"></script>
    <style>
        .top-box button{
            float:right;
        }
    </style>
{% endblock %}


{% block page_mail %}
<h1>轮播图管理</h1>
    <div class="top-box">
        <button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">
            添加轮播图</button>
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>图片链接</th>
                <th>跳转链接</th>
                <th>优先级</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for banner in banners %}
             <tr data-name="{{ banner.name }}" data-image="{{ banner.image_url }}" data-link="{{ banner.link_url }}"
                 data-priority="{{ banner.priority }}" data-id="{{ banner.id }}">
                 <td>{{ banner.name }}</td>
                 <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>
                 <td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>
                 <td>{{ banner.priority }}</td>
                 <td>{{ banner.create_time }}</td>
                 <td>
                     <button class="btn btn-default btn-xs edit-banner-btn">编辑</button>
                     <button class="btn btn-danger btn-xs delete-banner-btn">删除</button>
                 </td>
             </tr>
             {% endfor %}
        </tbody>
    </table>

<!-- 静态框 -->
<div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">轮播图</h4>
      </div>
      <div class="modal-body">
          <form action="" class="form-horizontal">
              <div class="form-group">
                  <label class="col-sm-2 control-label">名称：</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" name="name" placeholder="轮播图名称">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-2 control-label">图片：</label>
                  <div class="col-sm-7">
                      <input type="text" class="form-control" name="image-url" placeholder="轮播图图片">
                  </div>
                  <button class="btn btn-info col-sm-2">添加图片</button>
              </div>
              <div class="form-group">
                  <label class="col-sm-2 control-label">跳转：</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" name="link-url" placeholder="轮播图链接">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-2 control-label">权重：</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" name="priority" placeholder="优先级">
                  </div>
              </div>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
        <button type="button" class="btn btn-primary" id="save-banner-btn">保存</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}